import { defineComponent } from 'vue'
import { inputProps } from './types';
import "./index.scss"

export default defineComponent({
    name: 'VuaInput',
    inheritAttrs: false,
    props: inputProps,
    emits: ['update:modelValue'],
    setup(props, { emit, attrs }) {

        const onInput = (event: Event) => {
            const value = (event.target as HTMLInputElement).value;
            emit('update:modelValue', value)
        }

        return () => {
            return (
                <div class="vua-input">
                    <input
                        class="vua-input__inner"
                        type={attrs.type ? attrs.type as string : 'text'}
                        style={attrs.style as string}
                        placeholder={attrs.placeholder as string}
                        value={props.modelValue}
                        onInput={onInput}
                    />
                </div>
            )
        }
    }
})